<template>
  <div class="box">
    <div class="login6_9">
      <div class="login_img">
        <div class="img"></div>
        <!-- <img src="../../assets/images/backs.png" alt=" " /> -->
        <img
          src="../../assets/images/头图.png"
          style="margin-top: -20px"
          alt=""
        />
      </div>
      <div class="juzhong">
        <div>
          <el-input
            class="userName"
            v-model="code1"
            maxlength="50"
            placeholder="请输入真实姓名"
          ></el-input>
        </div>
        <div>
          <el-input
            class="phone"
            v-model="code2"
            type="number"
            maxlength="11"
            oninput="if(value.length>11)value=value.slice(0,11)"
            style="ime-mode: disabled"
            placeholder="请输入手机号码"
          ></el-input>
        </div>
        <div class="pswBox">
          <div
            class="yan"
            style="width: 30px; height: 30px"
            @click="eyesChange"
          >
            <img
              v-if="type == 1"
              src="../../assets/images/eyes.png"
              style="display: inline-block; width: 12px; height: 10px"
            />
            <img
              v-if="type == 2"
              src="../../assets/images/bieyes.png"
              style="width: 12px; height: 6px"
            />
          </div>
          <!-- 用来模拟显示密码 -->
          <div class="passworda">
            <img
              src="../../assets/images/lock.png"
              alt=""
              style="position: absolute; left: 22px; top: 5px; z-index: 9999"
            />
            <div
              class="simulationPsw"
              :class="type == 1 ? 'simulationPswActive' : ''"
              style="
                width: 87%;
                height: 32px;
                text-align: left;
                margin: 0 auto;
                line-height: 32px;
                text-indent: 22px;
                border-bottom: 1px solid #e6e6e6;
              "
              @click.stop="eyesChange1"
            >
              {{ code3 }}
            </div>
            <el-input
              ref="name"
              type="password"
              v-model.trim="code3"
              class="abc"
              maxlength="11"
              :class="type == 1 ? 'pswValue' : ''"
              placeholder="请设置登录密码"
              v-focus
              onkeyup="this.value=this.value.replace(/[^\w_]/g,'');"
            />
          </div>
        </div>
        <div class="loginmima6_9">
          <div
            class="yzmcode"
            style="
              width: 60%;
              margin-left: 20rpx !important;
              height: 0.9rem;
              float: left;
              padding-left: 10px;
            "
          >
            <el-input
              id="codes"
              class="code"
              type="number"
              oninput="if(value.length>6)value=value.slice(0,6)"
              input="value=value.replace(/[^\d]+/g,'')"
              v-model="code4"
              placeholder="请输入验证码"
            ></el-input>
          </div>
          <span class="yanzhengma6_9 yzCode" @click="yzm()">获取验证码</span>
        </div>
        <el-button class="subzhuce6_9 btn" :loading="loading" @click="sub()"
          >注册</el-button
        >
        <el-button class="subzhuce download" @click="sub1()"> 立即下载 </el-button>
        <!-- <div style="clear: both"></div> -->
      </div>
      <div class="foot">
        <span
          ><el-checkbox v-model="radio" label="1" class="redios"
            >已阅读并同意</el-checkbox
          >
          <span @click="hkPrivacy" class="agreement">《隐私协议》</span
          ><span style="color: black">与</span>
          <span @click="hkService" class="agreement">《服务协议》</span></span
        >
      </div>
    </div>
    <div class="msg" v-if="showTitleBool">
      {{ msgTitle }}
    </div>
  </div>
</template>

<script>
import https from "../../plugins/https.js";
import axios from "axios";
import $ from "jquery";
export default {
  name: "route",
  data() {
    return {
      type: 2,
      defaultPhoneHeight: "",
      nowPhoneHeight: "",
      radio: "",
      code1: "",
      code2: "",
      code3: "",
      code4: "",
      yanzheng: true,
      tabBarImgArr: [],
      // urltype: "https://apps-api.hkrt.cn",
      // urltype: "http://10.12.204.209:9890",
      urltype: "http://61.149.179.170:19098",
      fromData: {
        imgUrl: "",
        desclog: "",
      },
      loading: false,
      disabled: false,
      bools: "",
      focusBool: false,
      showTitleBool: false,
      msgTitle: "", //提示信息
    };
  },
  created() {
    if (
      sessionStorage.getItem("nickName") ||
      sessionStorage.getItem("phone") ||
      sessionStorage.getItem("password") ||
      sessionStorage.getItem("verifyCode")
    ) {
      this.code1 = sessionStorage.getItem("nickName");
      this.code2 = sessionStorage.getItem("phone");
      this.code3 = sessionStorage.getItem("password");
      this.code4 = sessionStorage.getItem("verifyCode");
    } else {
      this.code1 = "";
      this.code2 = "";
      this.code3 = "";
      this.code4 = "";
    }
  },
  mounted: function () {
    var _this = this;
    document.title = "注册";
    // window.scrollTo(0, 0);
    if (_this.getUrlCode().commendCode) {
      sessionStorage.setItem("commendCode", _this.getUrlCode().commendCode);
    } else {
      // this.$message("无法获取到您的邀请码！");
    }
    this.resetPage();
    this.bannerH5Log();
    this.defaultPhoneHeight = window.innerHeight;
    window.onresize = () => {
      this.nowPhoneHeight = window.innerHeight;
    };
  },
  destroyed() {
    window.onresize = null;
  },
  methods: {
    // 几秒以后隐藏提示
    hideMsgTitle() {
      setTimeout(() => {
        this.showTitleBool = false;
      }, 2000);
    },
    // 判断所有值都不能为空
    bindBool() {
      if (
        this.code1 != "" &&
        this.code2 != "" &&
        this.code3 != "" &&
        this.code4 != ""
      ) {
        this.disabled = false;
      }
    },

    eyesChange() {
      if (this.type == 1) this.type = 2;
      else this.type = 1;
    },
    eyesChange1() {
      // this.focusBool=true
      this.$refs.name.focus();
    },
    changePsw() {
      if (this.type != 2) {
        this.eyesChange();
      }
    },
    eyesChanges() {
      this.type = 1;
      $(".password").css("-webkit-text-security", "none");
    },
    hkPrivacy() {
      sessionStorage.setItem("nickName", this.code1);
      sessionStorage.setItem("phone", this.code2);
      sessionStorage.setItem("password", this.code3);
      sessionStorage.setItem("verifyCode", this.code4);
      this.$router.push("hkPrivacy");
    },
    hkService() {
      sessionStorage.setItem("nickName", this.code1);
      sessionStorage.setItem("phone", this.code2);
      sessionStorage.setItem("password", this.code3);
      sessionStorage.setItem("verifyCode", this.code4);
      this.$router.push("hkService");
    },
    // Focus(){
    //   $(".juzhong").css("margin-top","40%")
    // },
    // // Blur(){
    //    $(".juzhong").css("margin-top","54%")
    // },
    iptFocus() {
      $(".login6_9").eq(1).css("margin-top", "0.3rem");
    },
    iptBlur() {
      // console.log(3434, $('.login6_9').eq(1))
      $(".login6_9").eq(1).css("margin-top", "0.1rem");
    },
    bannerH5Log() {
      var _this = this;
      _this
        .axios({
          //axios请求
          method: "post",
          url: _this.urltype + "/api/common/v1/bannerH5Log",
          data: { officeCode: this.$route.query.commendCode },
        })
        .then(function (res) {
          // alert("成功");
          // console.log(8989, res.data)
          // _this.fromData = res.data
          if (res.data.code == "0000") {
            _this.fromData = res.data;
            // console.log(343, _this.fromData.imgUrl)
          } else {
            return;
          }
        })
        .catch(function (error) {
          //axios请求失败回调
          console.log(error);
        });
    },
    resetPage() {
      var htmls = document.getElementsByTagName("html")[0];
      var deviceWidth = document.documentElement.clientWidth;
      htmls.style.fontSize = 100 * (deviceWidth / 750) + "px";
      console.log(6666, 100 * (deviceWidth / 750) + "px");
      $("html").show();
    },
    changeCount() {
      /*手机号码*/
      var _this = this;
      if (
        _this.code2 == "" ||
        _this.code2.length < 11 ||
        _this.code2.length > 11
      ) {
        layer.open({
          content: "请输入正确的手机号！",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        return false;
      }
      var regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\] ]/im;
      if (regCn.test(_this.code2)) {
        this.msgTitle = "手机号码不能含有特殊字符";
        return false;
      }
      if (/[a-zA-Z]/im.test(_this.code2)) {
        layer.open({
          content: "手机号码不能含有字母",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        return false;
      }
      if (_this.code2 == "") {
        this.showTitleBool = true;
        this.msgTitle = "请输入手机号码";
        this.hideMsgTitle();
        return false;
      }
      if (!/^1[3|4|5|7|8|9][0-9]\d{4,8}$/.test(_this.code2)) {
        layer.open({
          content: "手机号码输入有误",
          skin: "msg",
          time: 2, //1秒后自动关闭
        });
        return false;
      }
      return true;
    },
    yzm() {
      var _this = this;
      if (_this.yanzheng) {
        if (!/^1[3456789]\d{9}$/.test(_this.code2)) {
          this.showTitleBool = true;
          this.msgTitle = "请输入手机号码";
          this.hideMsgTitle();
          // alert("手机不对");
          return;
        }
        //请求发送验证码
        var phone = _this.code2;
        _this
          .axios({
            //axios请求
            method: "post",
            url: _this.urltype + "/api/message/v1/webSend",
            data: {
              //axios子组件qs封装data
              phone: phone,
              commendCode: sessionStorage.getItem("commendCode"),
            },
          })
          .then(function (d) {
            if (d.data.code == "0000") {
              _this.yanzheng = false;
              var countDownTime = 60;
              let jishiqi = setInterval(function () {
                $(".yanzhengma6_9").text(countDownTime + "秒");
                if (countDownTime > 0) {
                  countDownTime--;
                } else {
                  clearInterval(jishiqi); //清空验证码倒计时
                  countDownTime = 60;
                  $(".yanzhengma6_9").text("获取验证码");
                  _this.yanzheng = true;
                }
              }, 1000);
            } else {
              _this.showTitleBool = true;
              _this.msgTitle = d.data.msg;
              _this.hideMsgTitle();
            } //axios请求成功回调
          })
          .catch(function (error) {
            //axios请求失败回调
            console.log(error);
          });
      }
    },
    sub1() {
      // this.$router.push("download");
      this.$router.push({
        path: "/download",
        query: { appDownUrl: this.fromData.appDownUrl },
      });
    },
    sub() {
      var _this = this;

      if (_this.code1 == "") {
        // this.$message("请填写姓名");
        // alert("填写联系人姓名");
        this.showTitleBool = true;
        this.msgTitle = "请输入真实姓名";
        this.hideMsgTitle();
        return false;
      }
      // _this.changeCount();
      if (_this.code2 === "") {
        this.showTitleBool = true;
        this.msgTitle = "请输入手机号码";
        this.hideMsgTitle();
        return false;
      }
      if (!/^1[3456789]\d{9}$/.test(_this.code2)) {
        this.showTitleBool = true;
        this.msgTitle = "手机号码输入有误";
        this.hideMsgTitle();
        // alert("手机号有误");
        return false;
      }
      if (_this.code3 == "") {
        // this.$message("请填写密码");
        this.showTitleBool = true;
        this.msgTitle = "请设置登录密码";
        this.hideMsgTitle();
        return false;
      }
      if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/.test(_this.code3)) {
        this.showTitleBool = true;
        this.msgTitle = "请输入8~16字母+数字密";
        this.hideMsgTitle();
        return false;
      }
      if (_this.code4 == "") {
        this.showTitleBool = true;
        this.msgTitle = "请输入验证码";
        this.hideMsgTitle();
        return false;
      }
      if (_this.radio == "") {
        this.showTitleBool = true;
        this.msgTitle = "请同意隐私协议与服务协议";
        this.hideMsgTitle();
        return false;
      }
      _this.loading = true;
      // _this.disabled=true
      axios({
        //axios请求
        method: "post",
        url: _this.urltype + "/api/userBase/v1/webRegister",
        data: {
          nickName: _this.code1,
          phone: _this.code2,
          password: _this.code3,
          verifyCode: _this.code4,
          commendCode: sessionStorage.getItem("commendCode"),
          appTag: this.$route.query.appTag ? this.$route.query.appTag : "1",
        },
      })
        .then(function (d) {
          console.log(234567, d.data);
          if (d.data.code == "0000") {
            let timeNum = 3;
            console.log(22222);
            _this.showTitleBool = true;
            _this.msgTitle = `注册成功3秒后跳转`;
            setInterval(() => {
              timeNum -= 1;
              _this.msgTitle = `注册成功${timeNum}秒后跳转`;
              if (timeNum == 0) {
                _this.hideMsgTitle();
                _this.$router.push({
                  path: "/download",
                  query: { appDownUrl: _this.fromData.appDownUrl },
                });
              }
            }, 1000);
          } else {
            _this.showTitleBool = true;
            _this.msgTitle = d.data.msg;

            _this.loading = false;
            // _this.disabled=false
          }
        })
        .catch(function (error) {
          //axios请求失败回调
          _this.loading = false;
          // _this.disabled=false
          console.log(error);
        });
    },
    switchTo(path) {
      this.$router.push(path); //跳转页面
    },
    getUrlCode() {
      var str = this.$route.query;

      return { commendCode: str.commendCode };
    },
    parentHandleclick() {
      var _this = this;
      _this.ingoxiala = false;
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 100vh;
  overflow-y: auto;
  /* background-image: linear-gradient(#fff1e0, #ff9940, #ffbe5c, #ffedd2); */
}
.login_img {
  width: 100%;
  text-align: center;
  margin-top: 0.3rem;
}
.login_img img {
  width: 100%;
  /* background: url("../../assets/images/backs.png") no-repeat ; */
  display: inline-block;
}
.login6_9 {
  background-image: linear-gradient(#fff1e0, #ff9940, #ffbe5c, #ffedd2);
  width: 100%;
  height: 100%;
  /* border: 1px solid red; */
  overflow-y: auto;
}
.loginname6_9 {
  font-size: 0.4rem;
  color: #222;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  text-align: center;
}
.loginmima6_9 {
  /* width: 7.5rem; */
  /* border: 1px solid red; */
  /* margin-left: 0.3rem; */
  /*   margin-top: 0.3rem; */
}
.loginmima6_9 input {
  float: left;
  width: 3.6rem;
  height: 0.9rem;
  font-size: 0.32rem;
  /*    background-color: #f6f6f6; */
  border: 0.02rem solid #eee;
  /* padding-left: 0.2rem; */
  box-sizing: border-box;
  border-radius: 0.15rem;
}
.yanzhengma6_9 {
  width: 40%;
  padding: 0 10px;
  padding-right: 0;
  /* margin-right: 0.65rem; */
  height: 40px;
  line-height: 40px;
  font-weight: 500;
  float: right;
  font-size: 0.32rem;
  color: #ff5a1b;
  /* background-color: #ddd; */
  text-align: center;
  border-radius: 0rem;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid #e6e6e6;
  position: relative;
  left: -20px;
  top: -8px;
  text-align: right;
}
.subzhuce6_9 {
  width: 90%;
  height: 1rem;
  line-height: 0rem;
  margin-top: 0;
  /* margin-left: 5%; */
  border-radius: 0.15rem;
  border: 0px solid #fff;
  font-size: 0.34rem;
  color: #fff;
  text-align: center;
  background-color: #ff5a1b;
  /* margin: 0 auto; */
}
.subzhuce {
  width: 90%;
  height: 1rem;
  line-height: 0rem;
  /* float: left; */
  margin-left: 0rem;
  margin-top: 0;
  /* margin-left: 5%; */
  border-radius: 0.15rem;
  font-size: 0.34rem;
  color: #ff5a1b;
  border: 1px solid #ff5a1b;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.login6_9 input {
  -webkit-appearance: none;
  /* outline:none */
}
.login6_9 .el-input {
  display: block;
}
.login6_9 div {
  margin-bottom: 15px;
}
.juzhon > div {
  display: flex !important;
  justify-content: center !important;
}
.list {
  display: flex;
  align-items: center;
}
/deep/ .el-input {
  width: 90% !important;
  margin: 0 auto;
}

/deep/ .el-input__inner {
  width: 98% !important;
  margin: 0 auto;
}
.juzhong {
  z-index: 1000 !important;
  background: #fff;
  text-align: center;
  margin-top: -35%;
  width: 92%;
  /* height: 350px; */
  position: relative;
  border-radius: 4px;
  margin-left: 4%;
  padding-top: 20px;
}
/deep/ .el-input__inner {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  border-bottom: 1px solid #e6e6e6;
}
.userName >>> .el-input__inner {
  background: url("../../assets/images/user.png") no-repeat 4px 7px;
  text-indent: 10px;
}
.phone >>> .el-input__inner {
  background: url("../../assets/images/phone.png") no-repeat 4px 4px;
  text-indent: 10px;
}
.passworda >>> .el-input__inner {
  position: relative;
}
.code >>> .el-input__inner {
  background: url("../../assets/images/code.png") no-repeat 4px 7px;
  text-indent: 10px;
}
.redios {
  margin-right: 0px;
  /* float: left; */
  /* width:100%; */
  text-align: center;
}
/deep/ .el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #ff5a1b;
  border-color: #ff5a1b;
  color: #000;
}
/deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #000;
}
/deep/ .el-checkbox__input.is-focus .el-checkbox__inner {
  /* border-color: #000 */
}
/deep/ .el-checkbox__inner:hover {
  border-color: #e6e6e6;
}
/deep/ .el-checkbox__inner {
  border-radius: 50%;
}
span {
  color: #ff5a1b;
}
.serve {
  margin-bottom: 0px;
  /* left: 38%; */
  float: left;
  font-weight: normal;
  margin-top: -3px;
}
.foot {
  /* float: left; */
  width: 100%;
  margin-left: 50%;
  margin-top: 20px;
  transform: translate(-50%, -50%);
  text-align: center;
}
.pswBox {
  position: relative;
}
.yan {
  position: absolute;
  right: 15px;
  top: 0;
  z-index: 999999999999999999999999 !important;
}
.simulationPsw {
  position: absolute;
  left: 20px;
}
.simulationPswActive {
  z-index: 999999999;
}
.pswValue {
  opacity: 0;
}
.msg {
  padding: 10px 10px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 9999999999999;
  color: white;
  border-radius: 4px;
  word-break: keep-all;
}
/deep/ .abc .el-input__inner {
  text-indent: 11px;
}
.btn {
  background: linear-gradient(0deg, #FF2125, #FFC219);
  box-shadow: 1px 3px 10px 0px rgba(203,0,6,0.3);
  border-radius: 44px;
  font-weight: bold;
}
.download{
  border-radius: 44px;
  border: 1px solid #FFD200;
  color: #FFBA00;
  font-weight: bold;
}
.yzCode{
  color: #FFBA00;
}
.agreement{
  color: #FFBA00;
}
</style>
